@import "@common/styles/index.scss";
@mixin flex() {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  height: -webkit-fill-available;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  padding: 0 $padding-4n;
  background-color: $white;
  z-index: $zindex-popup;

  :global {
    .dzq-input {
      max-width: 200px;

      .dzq-input__inner {
        padding: $padding-2n 0;
        text-align: right;
        border: none;
      }
    }

    .dzq-checkbox-wrap {
      margin-right: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .dzq-slider {
      .dzq-slider__progress--stick,
      .dzq-slider__feature {
        background: $text-bg-color2;
        height: 4px;
      }
      .dzq-slider__progress--active {
        height: 4px;
      }

      .dzq-slider__progress__button {
        width: 24px;
        height: 24px;
        background: $primary-color;
        border: 1px solid $white;

        &::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          background: $white;
          border-radius: $border-radius-circle;
        }
      }
    }
  }

  .paid-item {
    @include flex();
    padding: $padding-4n 0;
    
    font-size: $font-size-primary;
    color: $text-color-primary;

    .left {
      width: 130px;
      color: $text-color-regular;
      line-height: 18px;
      text-align: left;
    }

    .right {
      flex: 1;
      height: 20px;
      @include flex();
      justify-content: flex-end;
    }
  }

  .free {
    display: flex;
    flex-direction: column;
    .free-title {
      font-size: $font-size-primary;
      color: $text-color-secondary;
      line-height: $font-line-height-small;
      text-align: left;
    }
  }

  .btn {
    @include flex();
    flex-wrap: nowrap;
    position: absolute;
    left: 0;
    right: 0;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    margin: 0 $margin-10;
    padding: $padding-2n 0;
    background: $white;
    border-top: $border-solid-1;

    :global {
      .dzq-button {
        width: 48%;
        height: 42px;
        padding: $padding-10 0;
        font-size: $font-size-middle;
        color: $text-color-regular;
        line-height: $font-line-height-small;
        border: none;
        border-radius: $border-radius-small;
        background: $text-bg-color2;
        -webkit-tap-highlight-color: transparent;
      }
    }

    .btn-confirm {
      color: $white;
      background-color: $primary-color;
    }
  }
}

.pc {
  .wrapper {
    position: static;
    width: 100%;
    height: 134px;
    min-height: 134px;
    padding: 0;
  }
  .btn {
    padding: 0;
    position: static;
    width: 100%;
    height: rem(36);
    display: block;
    text-align: center;
    border: none;
  }
  :global {
    .dzq-button {
      width: rem(116);
      height: rem(36);
      border-radius: $border-radius-small;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
